<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页加载测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f0f0f0;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
        }
        .btn {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }
        .btn:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <h1>网页加载测试</h1>
    
    <div class="test-section">
        <h3>测试网页加载</h3>
        <p>点击下面的按钮测试不同类型的网页加载：</p>
        
        <button class="btn" onclick="testWebpage('https://www.baidu.com')">百度首页</button>
        <button class="btn" onclick="testWebpage('https://www.google.com')">Google首页</button>
        <button class="btn" onclick="testWebpage('https://www.github.com')">GitHub首页</button>
        <button class="btn" onclick="testWebpage('https://httpbin.org/delay/3')">延迟3秒的页面</button>
    </div>

    <div class="test-section">
        <h3>测试结果</h3>
        <div id="result">等待测试...</div>
    </div>

    <script>
        let deviceId = null;
        let targetTopic = 'display/control';

        // 初始化设备配置
        function initDeviceConfig() {
            const urlParams = new URLSearchParams(window.location.search);
            deviceId = urlParams.get('deviceid');
            
            if (deviceId) {
                targetTopic = `display/control/${deviceId}`;
                console.log('检测到设备ID:', deviceId);
                console.log('目标主题:', targetTopic);
                
                // 更新页面标题
                document.title = `网页加载测试 - 设备ID: ${deviceId}`;
            } else {
                console.log('未检测到设备ID，使用默认主题:', targetTopic);
            }
        }

        // 页面加载时初始化
        initDeviceConfig();

        function testWebpage(url) {
            const result = document.getElementById('result');
            result.innerHTML = `正在测试: ${url}`;
            
            // 模拟发送MQTT消息
            const message = {
                type: 'webpage',
                url: url,
                title: '测试网页',
                duration: 0
            };
            
            console.log('发送测试消息:', message);
            
            // 如果存在displayController，直接调用
            if (window.displayController) {
                window.displayController.handleMQTTMessage(message);
                result.innerHTML = `已发送消息: ${url}`;
            } else {
                result.innerHTML = `错误: 未找到displayController，请先打开主页面`;
            }
        }
    </script>
</body>
</html> 